define(function () {
    function Page(obj) {
        Object.assign(this, obj);
        this.init()
    }
    Page.prototype = {
        constructor: Page,
        init: function () { 
            this.index=1;
            this.maxpage=Math.ceil(this.data.length/10)
            this.render();
            this.renderpage();
            this.move()
        },
        render:function(){
            var list=this.data.slice((this.index-1)*10,this.index*10)
            var that=this;
            this.list.innerHTML=list.map((v,i)=>{
                return `
                    <li><img src='${v.singer_pic}'></li>
                    <span>${v.singer_name}</span>
                `
            }).join('')
        },

        renderpage:function(){
            this.page.innerHTML=`<span class='aa'>首页</span><span class='aa ${this.index==1?'disable':''}'>上一页</span>`
            for(var i=1;i<=this.maxpage;i++){
                this.page.innerHTML+=`<span class='${this.index==i?'on':''}'>${i}</span>`
            }

            this.page.innerHTML+=`<span class='aa'>下一页</span><span class='aa'>尾页</span>`
        },
        move:function(){
            var that=this;
            this.page.addEventListener('click',(e)=>{
                var el=e.target;
                if(el.nodeName=='SPAN'){
                    var str=el.innerText;
                    switch(str){
                        case '首页':
                            this.index=1;
                        break;
                        case '上一页':
                            this.index--;
                            if(this.index<=0){
                                this.index=1
                            }
   
                        break;
                        case '尾页':
                            this.index=this.maxpage;

                        break;
                        case '下一页':
                            this.index++
                            if(this.index>=this.maxpage){
                                this.index=this.maxpage
                            }

                        break;
                        default:
                            this.index=str;
                    }
                    this.render();
                    this.renderpage();
                }
            })
        }
    }
    return Page
})